import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:vdrag_saas/Utils.dart';
import 'package:vdrag_saas/model/item_model.dart';

// 商品卡片
class ItemContentRow extends StatelessWidget {
  final ItemModel item;
  final defaultCoverImage = Image.asset('assets/images/defaultWeb.png', height: 74, width: 115, fit: BoxFit.cover);
  double width;

  ItemContentRow({
    super.key,
    required this.item,
    required this.width
  });

  @override
  Widget build(BuildContext context) {
    bool isMobile = Utils.isMobile(context);
    // Stack 可以容纳多个组件，以叠加的方式摆放子组件，后者居上。拥有Alignment属性，
    // 可以与Positioned组件联合使用，精准并有效摆放。同Android端FramLayout布局相似。
    return Container(
      padding: const EdgeInsetsDirectional.symmetric(horizontal: 15, vertical: 12),
      // color: Colors.white,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadiusDirectional.circular(10)
      ),
      child: Container(
        width: width,
        constraints: const BoxConstraints(maxHeight: 74, minHeight: 74),
        child: Row(
          // mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            item.coverImage.isNotEmpty ? Image.network(item.coverImage, height: 74, width:115, fit: BoxFit.fill) : defaultCoverImage,
            const Padding(padding: EdgeInsetsDirectional.only(end: 10)),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // 名称
                  SizedBox(
                    width: width - 30 - 115 - 10,
                    child: Text(
                      item.itemName ?? "",
                      softWrap: true,
                      style: const TextStyle(
                        fontSize: 12,
                        color: Color.fromARGB(255, 51, 51, 51),
                      ),
                    ),
                  ),
                  // 浏览与点赞
                  Expanded(
                    child: Row(
                      children: [
                        const Icon(
                          Icons.remove_red_eye_outlined,
                          color: Color.fromARGB(255, 187, 187, 187),
                          size: 12,
                        ),
                        const Padding(padding: EdgeInsetsDirectional.only(end: 4)),
                        Text(
                          '${item.browseRecord ?? 0}',
                          style: const TextStyle(
                            fontSize: 12,
                            color: Color.fromARGB(255, 187, 187, 187),
                          ),
                        ),
                        const SizedBox(width: 24,),
                        const Icon(
                          Icons.thumb_up_off_alt,
                          color: Color.fromARGB(255, 187, 187, 187),
                          size: 12,
                        ),
                        const Padding(
                            padding: EdgeInsetsDirectional.only(end: 4)),
                        Text(
                          '${item.likeRecord ?? 0}',
                          style: const TextStyle(
                            fontSize: 12,
                            color: Color.fromARGB(255, 187, 187, 187),
                          ),
                        ),
                      ],
                    ),
                  ),
                  // 标签
                  Expanded(
                    child: SizedBox(
                      height: 20,
                      width: width - 30 - 115 - 10,
                      child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: item.labelArr.length,
                        itemBuilder: (context, index) =>
                            _buildItem(item.labelArr[index]),
                      ),
                    ),
                  ),
                  const SizedBox(height: 1)
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildItem(String label) => Container(
        alignment: Alignment.center,
        height: 20,
        padding: const EdgeInsets.only(left: 5, right: 5),
        margin: const EdgeInsets.only(right: 10),
        decoration: BoxDecoration(
          border: Border.all(
            width: 1,
            color: const Color.fromARGB(255, 179, 216, 255),
          ),
          borderRadius: BorderRadius.circular(0),
          color: const Color.fromARGB(255, 236, 245, 255),
        ),
        child: Text(label,
            style: const TextStyle(
                color: Color.fromARGB(255, 107, 179, 255), fontSize: 10)),
      );
}
